<template>
  <slot name="operation">
  </slot>
  <el-table
      :data="data"
      :stripe="stripe"
      :border="border"
      :max-height=max_height
      @selection-change="SelectionChange"
      :header-cell-style="{background:'rgba(200, 200, 200, 0.9) none repeat scroll 0% 0%',color:'rgb(33, 27, 38)','font-family':'Open Sans'}"
      style="width: 100%"
  >
    <slot></slot>
  </el-table>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {Search} from "@element-plus/icons-vue";
const prop = defineProps(['data', 'stripe', 'max_height', 'border','search',"diag","create","sinput"])
const emit = defineEmits(['submit',"update:diag","selection-change"])

const stripe = ref(true)
const border = ref(true)
const create = ref(true)
const sinput = ref(true)
const max_height = ref("700")

stripe.value = prop.stripe != null ? prop.stripe : true
border.value = prop.border != null ? prop.border : true
create.value = prop.create != null ? prop.create : true
sinput.value = prop.sinput != null ? prop.sinput : true
max_height.value = prop.max_height != null ? prop.max_height : "700"


function Submit() {
  if (prop.diag == true) {
    emit("update:diag", false);
  }else {
    emit("update:diag", true);
  }
}

function Create() {
  if (prop.diag == true) {
    emit("submit", false);
  }else {
    emit("submit", true);
  }
}

function SelectionChange(val) {
  emit("selection-change", val);
}
</script>

<style scoped>
@import "@/styles/table_header.scss";

.table_search {
  float: right;
  width: 200px;
  padding-right: 8px;
  padding-bottom: 0;
}

:deep(.el-button){
  border: none;
  margin-left: 2px;
}
</style>